<div class="am-g am-g-fixed recommendation myfeature">
            <div class="clock am-u-sm-3">
              <img src="<?php echo $show_img;?> ">
              <p><?php echo $show_tip;?></p>
            </div>
            <?php $pcount=12/count($products)-1;?>
             <?php foreach ($products as $product) { ?>
            <div class="am-u-sm-<?php echo $pcount;?> am-u-lg-<?php echo $pcount-1;?> ">
            <?php if($product['featured_title']): ?>
              <div class="info ">
                <h3><?php echo $product['featured_title'];?></h3>
<?php if($product['featured_des']): ?>
                <h4><?php echo $product['featured_des'];?></h4><?php endif ?> 
              </div>
              <?php endif ?> 
              <div class="recommendationMain one">
                <img src="<?php echo empty($product['featured_pic'])?"image/no_image.png":$product['featured_pic'];?>">
              </div>
            </div>  
            <?php }?>
            </div>
            <style type="text/css">
.myfeature{margin-top: 20px;}
.clock{display: none;color:#fff ;text-align: center;z-index:11 ;}
@media only screen and (min-width: 1025px) {
  .clock p{font-size:24px;position: absolute;top:50%;margin-top:-31px ;left:12%;}
.clock img{position: absolute;right: 10%;width: 120px;top:15px;}
.clock{display: block;height: 145px;background:url(image/catalog/module/featured/default_bg.png) repeat ;position: relative;}
.myfeature{margin-top: 10px;}
}
@media only screen and (min-width: 1260px) {
  .clock img{position: absolute;right: 15%;width: 120px;top:15px;}
  }
 </style>